<template>
    <div style="width:100%;height:100%">
        <ul>
            <li v-for="(item,index) in arr" :key="index" @click="$router.push('/sjxq?id='+item.product_id)">
                  <el-card shadow="hover">
                      <div style="width:100%;height:160px; text-align: center;">
                           <img :src="'http://106.15.179.105:3000/'+item.product_picture" style="width:100%;height:100%;">
                      </div>
                       <p style="text-align: center;margin-top:50px;height:35px">{{item.product_name}}</p>
                      <div style="font-size:12px;text-align: center;color:gray;margin-top:10px;">{{item.product_title}}</div>
                      <div style="text-align: center;margin-top:20px;font-size:18px;margin-bottom:12px">
                          <span style="color:#ff6700">{{item.product_selling_price}}元&ensp;</span>
                          <s v-if="item.product_selling_price!==item.product_price" style="color:gray">{{item.product_price}}元</s>
                      </div>
                  </el-card>
            </li>
        </ul>
        <!-- 分页 -->
        <div style="text-align:center;margin-top:30px">
     <el-pagination
  background
  @current-change="add"
  layout="prev, pager, next"
  :total="30">
</el-pagination>
        </div>
       
        <!-- 分页 -->

    </div>
</template>

<script>
export default {
    data() {
        return {
            arr:[],
        };
    },

    mounted() {
         this.add();
    },
created() {
   
},
    methods: {
       async add(currentPage){
           console.log(currentPage)
           let numys=1;
           if(currentPage==1){
               numys=1
           }
           if(currentPage==2){
               numys=2
           }
           if(currentPage==3){
               numys=3
           }
     let {data}=await this.$axios.post("api/product/getAllProduct",{categoryID: [], currentPage:numys, pageSize: 15})
     console.log(data.Product[0]);
     this.arr=data.Product
        }
    },
};
</script>

<style scoped>
ul{
    width: 100%;
    height: 90%;
    display: flex;
    flex-wrap: wrap;
}
li{
    width: 18%;
    height: 30%;
    background-color: pink;
    margin: 1%;
    cursor: pointer;
}
</style>